<template>
  <div>
    <Header></Header>
    <div class="content">
      <van-tabs
        class="tab"
        @click="changeTab"
        title-active-color="rgb(238, 10, 36)"
      >
        <van-tab
          title-style="font-size:3vw; font-weight: bold;"
          title="全部"
          class="van-tab"
        >
          <div class="content_item">
            <ul>
              <li v-for="item in allCake" :key="item.c_id">
                <!-- {{ item.cake_title }} -->
                <div class="content_item_img">
                  <router-link
                    :to="`/cakedetail?cid=${item.c_id}`"
                    class="toCake"
                    href="javascript:;"
                    ><img class="cake_img" :src="item.cake_img" alt=""
                  /></router-link>
                </div>

                <div class="content_item_text">
                  <div class="content_item_text">
                    <p class="content_item_text_title">
                      {{ item.cake_title }}
                    </p>
                    <p class="content_item_text_sold_count">
                      已售卖{{ item.sold_count }}件
                    </p>
                    <div class="content_item_text_price">
                      <span> ¥{{ item.price }}</span>
                      <a href="javascript:;">+</a>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </van-tab>

        <van-tab
          v-for="(item, i) in cakeTypedata"
          :key="i"
          :title="item.t_name"
          title-style="font-size:3vw; font-weight: bold;"
        >
          <div class="content_item">
            <ul>
              <!-- {{ item.cake_title }} -->
              <li v-for="item in selCakes" :key="item.c_id">
                <!-- {{ item.cake_title }} -->
                <div class="content_item_img">
                  <router-link
                    :to="`/cakedetail?cid=${item.c_id}`"
                    class="toCake"
                    href="javascript:;"
                    ><img class="cake_img" :src="item.cake_img" alt=""
                  /></router-link>
                </div>

                <div class="content_item_text">
                  <div class="content_item_text">
                    <p class="content_item_text_title">
                      {{ item.cake_title }}
                    </p>
                    <p class="content_item_text_sold_count">
                      已售卖{{ item.sold_count }}件
                    </p>
                    <div class="content_item_text_price">
                      <span> ¥{{ item.price }}</span>
                      <a href="javascript:;">+</a>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
import Header from "../components/Header.vue";
export default {
  components: { Footer, Header },
  data() {
    return {
      cakeTypedata: [], //保存蛋糕类型数据
      allCake: [],
      selCakes: [], //保存所查找的蛋糕数据
    };
  },
  created() {
    this.loadCakeType(); //所有蛋糕的类型名
    // this.loadAllCakes(1); //查询所有蛋糕
    // this.loadTypeCakes(1);
    this.loadAllCake();
  },
  // mounted() {},
  methods: {
    changeTab(name, title) {
      let id = name;
      console.log(id);
      this.axios.get(`/cake/selCakes?tid=${id}`).then((res) => {
        this.selCakes = res.data.selCake;
        // console.log(this.selCakes);
      });
    },
    loadCakeType() {
      this.axios.get("/cake/cake_type").then((res) => {
        this.cakeTypedata = res.data.cakeType;
        // console.log(this.cakeTypedata);
      });
    },
    loadAllCake() {
      this.axios.get("/cake/allCake").then((res) => {
        this.allCake = res.data.allCake;
        // console.log(this.allCake);
      });
    },
  },
  computed: {
    getVuexIsLogin() {
      return this.$store.state.islogin;
    },
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/cakedetail") {
      if (this.getVuexIsLogin == null) {
        this.$toast({
          message: "请登录...",
          forbidClick: true,
          duration: 3000,
          onClose: () => {
            next("/login");
          },
        });
      } else {
        next();
      }
    } else {
      next();
    }
  },
};
</script>
<style scoped src="../assets/css/typecake.css"></style>
<style lang="scss" scoped></style>
